<template>
	<view>
		<navigation-custom :config="config" :wrapperStyle="wrapperStyle" :scrollTop="scrollTop" @customConduct="customConduct"
		 :scrollMaxHeight="scrollMaxHeight">
			<view class="slot">
				<image :src="static(1,'jpg')"></image>
				<view class="author">不动卿奥森</view>
			</view>
		</navigation-custom>
		<view class="content">
			<view class="amount">
				共上传 {{workInfos.amount}} 个作品
			</view>
			<view class="my-works">
				<item-list-temple ref="list" @refresh="refresh" selfLoadtext="loading.." :itemList="workInfos.list" :scrollStyle="getHeight">
					<!-- 图文列表 -->
					<block v-for="(item,index1) in workInfos.list" :key="index1">
							<common-list :item="item" :index="index"></common-list>
					</block>
				</item-list-temple>
			</view>

		</view>
	</view>
</template>

<script>
	import navigationCustom from "@/components/common/navigation-custom.vue";
	import commonList from "@/components/work/common-list.vue";
	import itemListTemple from '@/components/common/item-list-temple.vue';
	export default {
		components: {
			navigationCustom,
			commonList,
			itemListTemple
		},
		computed: {
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(493+112)
				return `height: ${height}px;`;

			}
		},
		mounted() {
			this.initData()
		},
		methods: {
			async refresh(opt){
				console.log(opt)
				if(opt=="loadmore"){
					this.workInfos.page++;
					await this.getList(()=>{
						this.$refs.list.loadtext = ''
					});
					
				}else if('refresh'){
					// this.getList();
					this.workInfos.list = []
				}
			},
			async getList(suc,fail) {
				let newDatas = [];
				setTimeout(() => {
					newDatas = [{
						src: 'https://assets-cdn.lanqb.com/hyxq/xcxu/1.jpg',
						desc: '这是一个绘画星球，在这里可以找到各种各样有趣的好朋友哟',
						avatar: "https://assets-cdn.lanqb.com/hyxq/xcxu/6.jpg",
						zanNum: 1628,
						author: '皮皮是只兔子呀',
						isLike: true,
						pushTime: '今天12:30',
						workIndex: 1,
					}, {
						src: 'https://assets-cdn.lanqb.com/hyxq/xcxu/1.jpg',
						desc: '快来合个影吧',
						avatar: "https://assets-cdn.lanqb.com/hyxq/xcxu/6.jpg",
						zanNum: 1628,
						author: '皮皮是只兔子呀',
						isLike: true,
						pushTime: '今天12:30',
						workIndex: 2,
					}, {
						src: 'https://assets-cdn.lanqb.com/hyxq/xcxu/1.jpg',
						desc: '快来合个影吧',
						avatar: "https://assets-cdn.lanqb.com/hyxq/xcxu/6.jpg",
						zanNum: 1628,
						author: '皮皮是只兔子呀',
						isLike: true,
						pushTime: '今天12:30',
						workIndex: 3,
					}]
					this.workInfos.amount += newDatas.length;
					this.workInfos.list.push(...newDatas);
					if(typeof suc =='function'){
						suc()
					}
				}, 1000)

			},
			initData(){
			 this.getList()
				
			}
		},
		data() {
			return {
				workInfos: {
					loadtext: '',
					amount: 0,
					page: 0,
					list: []
				},
				// 自定义导航栏
				config: {
					title: "画友星球", //title
					bgcolor: "#457EEC", //背景颜色
					fontcolor: "#FFF", //文字颜色，默认白色
					type: 2, //type 1，3胶囊 2，4无胶囊模式
					transparent: true, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字,

				},
				wrapperStyle: {
					height: 413,
					backgroundColor: '#457EEC'
				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示
			};
		}
	}
</script>

<style lang="scss">
	.slot {
		color: rgba(255, 255, 255, .5);
		font-size: 28upx;
		text-align: center;

		>image {
			width: 110upx;
			height: 110upx;
			border-radius: 50%;
			margin-top: 35upx;
			border: 4px solid rgba(255, 255, 255, 1);
		}

		.author {
			color: rgba(255, 255, 255, 1);
			font-size: 36upx;
			font-weight: 500;
		}
	}



	.content {
		

		>.amount {
			font-size: 28upx;
			font-weight: 400;
			color: rgba(140, 140, 140, 1);
			padding-left: 32upx;
			line-height: 2.8;
			background: rgba(247, 247, 247, 1);
		}

		>.my-works {
			position: relative;
		}
	}
</style>
